import React, { Component } from 'react'
import './index.css'
import PubSub from 'pubsub-js'

export default class List extends Component {
  state = {
		users: [], // 储存用户信息
		isFirst: true, // 是否是第一次打开页面
		isLoading: false, // 是否loading
		err: '', // 存储请求相关的错误信息
	}
  // 组件刚挂载的时候开始消息订阅与发布
  componentDidMount() {
    this.token = PubSub.subscribe('updateList', (_,stateObj) => { // 不需要的参数可以用下划线占位
      this.setState(stateObj)
    })
  }
  // 组件卸载前取消消息的订阅与发布
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }
  render() {
    const {users,isFirst,isLoading,err} = this.state
    return (
        <div className="row">
          {
            isFirst? <h2>欢迎使用GitHub搜索，请输入关键字</h2> :
            isLoading? <h1>Loading...</h1> :
            err? <div style={{color: 'red'}}>{err}</div> :
            users.map(item => {
              return <div className="card" key={item.id}>
                  <a href={item.html_url} target="_blank" rel="noreferrer">
                      <img src={item.avatar_url} alt='avatar' style={{'width': '100px'}}/>
                  </a>
                  <p className="card-text">{item.login}</p>
              </div>
            })
          }
        </div>
    )
  }
}
